import React from 'react';
import {
  ForkOutlined, NodeIndexOutlined, SolutionOutlined, ApiOutlined,
} from '@ant-design/icons';
import {
  Steps, Select, Descriptions, Spin, Progress,
} from 'antd';

function App() {
  const timerRef = React.useRef();
  const [percent, setPercent] = React.useState(-50);

  const items = [
    {
      key: '1',
      label: '开始时间',
      children: '1994-10-13 12:12:12',
    },
    {
      key: '2',
      label: '持续时间',
      children: '192536s',
    },
    {
      key: '3',
      label: '模型',
      children: 'stepByStep-DAG',
    },
    {
      key: '4',
      label: '版本',
      children: 'v10.2.30.2',
    },
    {
      key: '5',
      label: '部署结果',
      children: <Spin percent={percent} />,
    },
  ];

  React.useEffect(() => {
    timerRef.current = setTimeout(() => {
      setPercent((v) => {
        const nextPercent = v + 5;
        return nextPercent > 150 ? -50 : nextPercent;
      });
    }, 100);
    return () => clearTimeout(timerRef.current);
  }, [percent]);
  return (
    <div style={{ height: '600px' }}>
      <Select
        defaultValue="lucy"
        style={{
          width: 220,
        }}
        onChange={() => {}}
        options={[
          {
            value: 'jack',
            label: 'workload-as4d56ad4ad4d4ad6a',
          },
          {
            value: 'lucy',
            label: 'workload-ad6a',
          },
        ]}
      />
      <div style={{ display: 'flex' }}>
        <Descriptions
          style={{
            display: 'inline-block',
            width: '70%',
            border: '1px solid #EEEEEE',
            padding: '10px',
            margin: '10px 0',
          }}
          size="small"
          column={3}
          title="workload-dsadad4a36d4a6d4a"
          items={items}
        />
        <div style={{
          padding: '10px',
          width: '30%',
          margin: '10px 0',
          boxSizing: 'border-box',
          textAlign: 'center',
          border: '1px solid #1677ff',
          color: '#1677ff',
        }}
        >
          <Progress
            steps={10}
            percent={percent}
            size={[20, 40]}
            showInfo={false}
            status="exception"
          />
          <p style={{ fontSize: '24px', fontWeight: '600' }}>部署中</p>
        </div>
      </div>
      <Steps
        style={{ padding: '120px 30px', background: '#e6f4ff' }}
        type="navigation"
        current={3}
        items={[
          {
            title: '配置资源',
            status: 'finish',
            description: '根据应用依赖生成配置文件',
            subTitle: '00:00:08',
            icon: <ApiOutlined />,
          },
          {
            title: '资源校验',
            status: 'finish',
            description: '校验资源完整性',
            subTitle: '00:00:18',
            icon: <SolutionOutlined />,
          },
          {
            title: '加载资源',
            status: 'process',
            subTitle: '00:00:38',
            description: '加载资源到应用场景',
            icon: <ForkOutlined />,
          },
          {
            title: '部署',
            status: 'wait',
            description: '开始部署应用资源',
            icon: <NodeIndexOutlined />,
          },
        ]}
      />
    </div>

  );
}
export default App;
